<link rel="stylesheet" href="./css/environment.css">
<div class="body_main environ_main">
    <div class="comTip sunLight">
        <span class="iconfont icon-guangzhao"></span>
        <span>光照7339E：42600lux</span>
    </div>
</div>
<div class="body_right hasScroll">
    <div class="temperature">
        <div class="today">
            <p class="bigText">21℃</p>
            <p class="text">
                <span>晴</span>
                <span class="line"></span>
                <span>相对湿度：42g/kg</span>
            </p>
        </div>
        <div class="item">
            <span class="bigText">明天</span>
            <span class="text">阴</span>
            <span class="float-right text">18℃ | 25℃</span>
        </div>
        <div class="item">
            <span class="bigText">后天</span>
            <span class="text">阴有小雨</span>
            <span class="float-right text">12℃ | 20℃</span>
        </div>
        <div class="btnBox">
            <button class="btn btn-default">未来24小时天气详情</button>
        </div>
    </div>
    <div class="dataView" id="environ_data">
        
    </div>
    <div class="dataView" id="sunLight_view">

    </div>
    <div class="dragBox">
        <span class="iconfont icon-tudingguding"></span>
        <div>将设备弹窗拖到这边固定</div>
    </div>
    <div class="right_foot">
        <div class="item clearfix">
            <div class="iconfont icon-liucheng"></div>
            <div class="title">2021年度良田基础生产流程</div>
        </div>
    </div>
</div>
<script>
    $(function () {
        setTimeout(dataView_environ, 500);
        $(".sunLight").Tdrag({
            scope:'main_body',
            pos:true,
            moveClass:'dragBox',
            cbEnd:function(){
                $(".sunLight").hide();
                sun_light_data();
                console.log('加载数据')
            }
        });
    })
    function dataView_environ() {
        var myChart = echarts.init(document.getElementById('environ_data'));
        var option = {
            title: {
                text: '',
                textStyle: {
                    color: '#d7d7d7'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                show: false
            },
            toolbox: {
                show: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['07:00', '08:00', '09:00', '10:00', '11:00'],
                axisLabel:{
                    color:'#e6e6e6'
                }
            },
            yAxis: {
                show: false,
                type: 'value',
                axisLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    data: [14, 15, 18, 16, 17],
                    type: 'line',
                    areaStyle: {
                        opacity: 0.6,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#19be6b'
                            },
                            {
                                offset: 1,
                                color: '#c7f1d8',
                            }
                        ])
                    },
                }
            ]
        };
        myChart.setOption(option);
    }
    function sun_light_data(){
        var myChart = echarts.init(document.getElementById('sunLight_view'));
        var option = {
            title: {
                text: '',
                textStyle: {
                    color: '#d7d7d7'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                show: false
            },
            toolbox: {
                show: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['07:00', '08:00', '09:00', '10:00', '11:00'],
                axisLabel:{
                    color:'#e6e6e6'
                }
            },
            yAxis: {
                show: false,
                type: 'value',
                axisLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    data: [14, 15, 18, 16, 17],
                    type: 'line',
                    areaStyle: {
                        opacity: 0.6,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#19be6b'
                            },
                            {
                                offset: 1,
                                color: '#c7f1d8',
                            }
                        ])
                    },
                }
            ]
        };
        myChart.setOption(option);
    }
</script>